<template>
  <div class="home">
    <el-container class="operation-wrapper">
      <el-aside class="el-aside">
        <div class="hea">
          <router-link :to="{ path: '/welcome' }">
            <img src="../assets/images/logo.png" class="img" />
          </router-link>
        </div>
        <el-menu
          :unique-opened="true"
          background-color="#ffffff00"
          text-color="#797689"
          active-text-color="#DCCECB"
          class="nb"
        >
          <el-submenu v-for="item in list" :index="String(item.menuId)">
            <template slot="title">
              <!-- <router-link :to="item.menuUrl ? item.menuUrl : ''"> -->
              <i class="el-icon-s-claim"></i><span>{{ item.menuName }}</span>
            </template>
            <template v-if="item.menuChilds.length > 0">
              <router-link
                v-for="e in item.menuChilds"
                :to="e.menuUrl ? e.menuUrl : ''"
              >
                <el-menu-item :index="String(e.menuId)"
                  ><span>{{ e.menuName }}</span></el-menu-item
                >
              </router-link>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧 -->
      <el-container>
        <el-header class="el-header">
          <div class="tou">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
            <span>{{ this.username }}</span>
          </div>
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link :to="{ path: '/user' }">个人中心</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <p @click="exit">注销</p>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <!-- 右侧内容区 -->
        <el-main class="el-main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import Menus from "./Menu.vue";
import { mapActions } from "vuex";
export default {
  name: "Home",
  // components: { Menus },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    ...mapActions(["getMenuList"]),
    // async handleLogout() {
    //   await this.$store.dispatch("logout");
    //   this.$router.push("/login");
    // },
    async menuList() {
      let lists = await this.getMenuList();
      this.list = [...lists];
      console.log(this.list);
    },
    loadName() {
      var name = localStorage.getItem("name");
      this.username = name;
    },
    exit() {
      //清除状态保持
      window.localStorage.clear();
      //返回登录页面
      this.$router.push("/login");
      //提示框
      this.$message({
        message: "注销成功",
        type: "success",
        showClose: true,
      });
    },
  },
  created() {
    this.menuList();
    this.loadName();
  },

  // computed: { ...mapGetters(["getMenuInfo"]) },
};
</script>

<style scoped>
.img {
  width: 150px;
}

.operation-wrapper {
  width: 100% !important;
}
.el-header {
  height: 61px;
}

.nb {
  border-radius: 20px;
}
.el-aside {
  width: 200px;
  height: calc(100vh - 61px);
  overflow-y: auto;
}

.el-main {
  padding: 0px 16px !important;
  height: calc(100vh - 61px);
  overflow-y: auto;

  /* padding-top: 20px; */
}
.shouye {
  font-size: 1vmax;
  font-weight: 500;
}
.hea {
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* color: #DCCECB; */
}

.hea > span {
  width: 35px;
  height: 35px;
  /* background-color:black; */
  font-size: 100em;
  /* border-radius: 35px; */
}

.tou {
  margin-right: 30px;
}

span {
  /* color: #585858; */
  font-size: 18px;
  font-weight: 800;
  /* padding-left: 20px; */
}

.el-header {
  box-shadow: 0px 5px 5px rgba(215, 215, 215, 0.349019607843137);
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff0ec;
  display: flex;
  justify-content: end;
  align-items: center;
}

.el-menu-item:hover {
  /* outline: 0 !important; */
  background: white !important;
  color: #343961 !important;
}
.el-menu-item.is-active {
  color: #343961 !important;
  background: white !important;
}

.el-dropdown {
  position: absolute;
  right: 0;
  top: 30px;
  font-size: 20px;
}

a {
  text-decoration: none;
  color: black;
}
</style>
